<template>
  <div class="selectTreePage">
    <select-tree
      ref="trees"
      v-model="selectData.tree"
      :options="options"
      :multiple="true"
      :isSelectParent="true"
      :defaultProps="{
        value: 'codess',
        label: 'namess',
        children: 'children'
      }"
    />
    <el-button @click="search">查询</el-button>
    <el-button @click="reSet">重置</el-button>
  </div>
</template>

<script>
export default {
  components: {
    SelectTree: () => import("../components/selectTree.vue"),
  },
  data() {
    return {
      selectData: { 
        tree: null,
      },
      options: [
        {
          codess: 1,
          namess: "北京市",
          children: [
            { codess: 2, namess: "朝阳区" },
            { codess: 3, namess: "东城区" },
          ],
        },
        {
          codess: 4,
          namess: "黑龙江",
          children: [
            { codess: 5, namess: "哈尔滨" },
            { codess: 6, namess: "佳木斯" },
          ],
        },
        {
          codess: 55,
          namess: "辽宁省",
          // childList: [{ id: 8, label: '沈阳市' }, { id: 9, label: '大连市' }]
        },
      ],
    };
  },
  mounted() {

    // this.selectData.tree = 55;
    setTimeout(()=>{
      this.$refs.trees.value = 55;
      console.log("🚀 ~ file: selectTreePage.vue ~ line 56 ~ created ~ this.selectData.tree", this.selectData.tree,888,this.$refs.trees)
    })
  },
  methods: {
    reSet() {
      this.selectData.tree = ''
      console.log('this.selectData.tree',this.selectData.tree);
    },
    search() {
      console.log(this.selectData.tree);
    },
  },
};
</script>

<style lang="less" scoped>
.selectTreePage {
  height: 500px;
  width: 1000px;
  background: burlywood;
}
</style>